<template>
  <div ref="parent">
    <div class="section">
      <div class="border-row"></div>
      <div class="border-col"></div>
      
      <div class="section-header">发布就业机会TOP10</div>
      <div :style="chartsDom" v-if="jz">
        <swiper :options="swiperOption" ref="mySwiper" v-if="listData.length" :style="chartsDom">
          <!-- slides -->
          <swiper-slide v-for="(item, index) in listData" :key="index">
            <rank-list-item :index="index" :color="`#fdbc21`" :name="item.EnterpriseName" :value="item.Number" :percentage="Math.round(100*(item.Number/totalValue))" v-if="index === 0" class="rank-component"></rank-list-item>
            <rank-list-item :index="index" :color="`#fb7218`" :name="item.EnterpriseName" :value="item.Number" :percentage="Math.round(100*(item.Number/totalValue))" v-if="index === 1" class="rank-component"></rank-list-item>
            <rank-list-item :index="index" :color="`#2bda6c`" :name="item.EnterpriseName" :value="item.Number" :percentage="Math.round(100*(item.Number/totalValue))" v-if="index === 2" class="rank-component"></rank-list-item>
            <rank-list-item :index="index" :color="`#37a2da`" :name="item.EnterpriseName" :value="item.Number" :percentage="Math.round(100*(item.Number/totalValue))" v-if="index > 2" class="rank-component"></rank-list-item>
          </swiper-slide>
        </swiper>
      </div>
             <animae-jz  :style="chartsDom" v-if="!jz"></animae-jz>
    </div>
  </div>
</template>
<script>
import { get_JobTable_CompanyPostsNumberTop10 } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      listData: [],
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        overflow: 'hidden',
        padding: '15px 0',
        'box-sizing': 'border-box'
        // 'background-color': 'red'
      }
      }
    },
    totalValue() {
      if(this.listData instanceof Array){
        return eval(this.listData.map(v=>v.Number).join('+'))
      }else{
        return 1
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_=>{
      this.init();
    })
  },
  methods: {
    init(){
      this.jz=false
      get_JobTable_CompanyPostsNumberTop10(this.dateProp)
      .then(({data:{data}})=>{
        this.jz=true
        this.listData = data
      })
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
  .rank-component
    margin-top 15px
</style>